<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <el-row>
          <el-button @click="drawer = true" >默认按钮</el-button>
          <el-button type="primary" @click="open">主要按钮</el-button>
          <el-button type="success">成功按钮</el-button>
          <el-button type="info">信息按钮</el-button>
          <el-button type="warning">警告按钮</el-button>
          <el-button type="danger">危险按钮</el-button>
        </el-row>
      </el-main>
    </el-container>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false">
      <span>我来啦!</span>
    </el-drawer>
  </div>
</template>

<script>
  export default{
    data(){
      return {
        drawer: false
      }
    },
    methods:{
      open(){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>

<style>
  .el-header, .el-footer {
      background-color: #409EFF;
      color: white;
      text-align: center;
      line-height: 60px;
    }
</style>
